<script setup lang="ts">
import { $t } from '@/locales';

defineOptions({
  name: 'GlobalLogo'
});

interface Props {
  /** Whether to show the title */
  showTitle?: boolean;
}

withDefaults(defineProps<Props>(), {
  showTitle: true
});
</script>

<template>
  <RouterLink to="/" class="w-full flex-center nowrap-hidden">
    <SystemLogo class="text-32px text-primary" style="width: 40px;height: 40px;"/>
    <h2 v-show="showTitle" class="pl-4px text-16px text-primary font-bold transition duration-300 ease-in-out title">
      {{ $t('system.title') }}
    </h2>
  </RouterLink>
</template>

<style scoped>
.title{
  margin-right: 20px;
}
</style>
